<template>
  <div class="goods df">
    <!-- 侧边导航 -->
    <div class="nav fn">
      <van-sidebar v-model="activeKey">
        <van-sidebar-item
          v-for="(item, i) in sideBarList"
          :key="i"
          :title="item"
          @click="onChange"
        />
      </van-sidebar>
    </div>
    <!-- 右边内容 -->
    <div class="main f1">
      <div class="bs-wapper">
        <div class="goods-list">
          <!-- ///商品 -->
          <div
            v-for="(item, index) in goodsList"
            :key="item.name"
            :id="'g' + index"
            class="goods-item"
          >
            <!-- //头部 -->
            <div class="good-name">{{ item.name }}</div>
            <!-- 食品列表 -->
            <div class="foods-list">
              <!-- //食品 -->
              <van-card
                v-for="subItem in item.foods"
                :key="subItem.id"
                :price="subItem.price"
                :desc="subItem.goodsDesc"
                :title="subItem.name"
                :thumb="subItem.imgUrl"
              >
                <template #tags>
                  <van-tag plain type="danger"
                    >月售{{ subItem.sellCount }}份</van-tag
                  >
                  <van-tag plain type="danger"
                    >好评度{{ subItem.rating }}%</van-tag
                  >
                </template>
                <template #footer>
                  <van-stepper
                    min="0"
                    v-model="subItem.count"
                    theme="round"
                    button-size="22"
                    disable-input
                  />
                </template>
              </van-card>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Vue, Component, Prop } from "vue-property-decorator";

//引入betterScroll
import BScroll from "@better-scroll/core";

//解构方法
import { mapActions, mapGetters, mapState } from "vuex";

@Component({
  //计算属性
  computed: {
    //侧边栏数据
    ...mapGetters(["sideBarList"]),
    //商品列表
    ...mapState(["goodsList"]),
  },
  //,方法
  methods: {
    //商品信息
    ...mapActions(["get_goods_list"]),
  },
})
export default class Goods extends Vue {
  //定义商品方法
  get_goods_list: any;
  //导航初始化
  activeKey: number = 0;
  bs2: any;

  //设置一个logding
  logding: boolean = false;

  //改变导航
  onChange(index: number) {
    // console.log("index :>> ", index);
    //滚动到指定位置
    this.bs2.scrollToElement("#g" + index, 1000);
    //点击左侧的时候，右侧脱绑
    this.logding = true;
  }

  //初始化请求
  created() {
    this.get_goods_list();
  }
  //操作dom
  mounted() {
    //导航
    setTimeout(() => {
      this.$nextTick(() => {
        let bs1 = new BScroll(".nav", {
          // ...... 配置项
          scrollY: true,
          click: true,
        });
      });
    }, 300);
    //内容列表
    setTimeout(() => {
      this.$nextTick(() => {
        this.bs2 = new BScroll(".bs-wapper", {
          // ...... 配置项
          scrollY: true,
          click: true,
          probeType: 3, //任何时候都派发 scroll 事件，包括调用 scrollTo 或者触发 momentum 滚动动画
        });

        //获取右侧所有盒子 存在一个数组中
        const goodsNodeList = document.querySelectorAll(".goods-item");
        //获取盒子的高度
        let heightList = [...(<any>goodsNodeList)].map((v) => {
          return v.clientHeight;
        });
        // console.log("heightList :>> ", heightList);
        //监听右侧滚动事件
        this.bs2.on("scroll", (position: any) => {
          //点击左侧，获取滚动的高度
          let y = Math.abs(position.y);
          heightList.reduce((total, cur, index) => {
            //如果y的值>total 并且 y<total+cur 的值 左边的索引与右边的相等
            if (y > total && y < total + cur) {
              this.activeKey = index;
            }
            return total + cur;
          }, 0);
          //监听停止的时候，logding为false
          this.bs2.on("scrollEnd", () => {
            this.logding = false;
          });
        });
      });
    }, 300);
  }
}
</script>

<style lang="scss">
.goods {
  height: 100%;
  overflow: auto;
  .nav {
    height: 100%;
    // overflow: scroll;
  }
  .main {
    height: 100%;
    overflow: scroll;
  }

  .van-sidebar-item--select::before {
    background-color: #ffc300;
  }
  .goods-list {
    .good-name {
      margin-top: 15px;
      background: #eee;
      font-size: 12px;
      height: 25px;
      line-height: 25px;
      padding-left: 8px;
      color: #666;
    }
    .van-card__desc {
      margin-top: 3px;
    }
    .van-tag--danger.van-tag--plain {
      margin-top: 3px;
      color: #666;
    }
    .van-tag--plain::before {
      border: 0;
    }
    .van-card__price {
      color: #f00;
    }
    .van-stepper--round .van-stepper__plus {
      background-color: #ffc300;
    }
    .van-stepper--round .van-stepper__minus {
      color: #ffc300;
      border: 1px solid #ffc300;
    }
  }
  .van-sidebar-item:last-child {
    margin-bottom: 250px;
  }
  .bs-wapper {
    height: 100%;
  }
}
</style>